froala-editor
Advanced tools
A beautiful Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
Froala Editor is a lightweight WYSIWYG HTML Editor written in JavaScript that enables rich text editing capabilities for web applications. It is designed to be easy to integrate and offers a wide range of features including text formatting, image and video embedding, and more.
Text Formatting
This feature allows users to format text with options like bold, italic, underline, and more. The code sample initializes the Froala Editor with a toolbar that includes these text formatting options.
const FroalaEditor = require('froala-editor');
new FroalaEditor('#editor', {
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript']
});Image Upload
This feature enables users to upload images directly into the editor. The code sample shows how to configure the editor to upload images to a specified URL.
const FroalaEditor = require('froala-editor');
new FroalaEditor('#editor', {
imageUploadURL: '/upload_image'
});Video Embedding
This feature allows users to embed videos within the editor. The code sample demonstrates how to enable video embedding in the Froala Editor.
const FroalaEditor = require('froala-editor');
new FroalaEditor('#editor', {
videoUpload: true
});Custom Toolbar
This feature allows customization of the toolbar to include only the desired buttons. The code sample shows how to initialize the editor with a custom toolbar that includes buttons for text formatting, image insertion, and video insertion.
const FroalaEditor = require('froala-editor');
new FroalaEditor('#editor', {
toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertVideo']
});Quill is a modern WYSIWYG editor built for compatibility and extensibility. It offers a similar range of features to Froala Editor, including text formatting, image and video embedding, and a customizable toolbar. Quill is known for its modular architecture and ease of customization.
TinyMCE is a popular rich text editor that provides a wide range of features similar to Froala Editor. It supports text formatting, image and video embedding, and a customizable toolbar. TinyMCE is highly extensible and offers a large number of plugins to enhance its functionality.
CKEditor is a powerful WYSIWYG editor that offers a comprehensive set of features, including text formatting, image and video embedding, and a customizable toolbar. CKEditor is known for its robust performance and extensive plugin ecosystem, making it a strong competitor to Froala Editor.
❗️This branch is for Froala WYSIWYG Editor V2. Version 3 is available on https://github.com/froala/wysiwyg-editor.
Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
Froala WYSIWYG HTML Editor requires jQuery 1.11.0 or higher and the iconic font named Font Awesome 4.4.0. You may also use older versions of Font Awesome, but some of the editor's icons will not appear.
<!-- Include CSS for icons. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>
<!-- Include jQuery lib. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/js/froala_editor.pkgd.min.js"></script>
<!-- Initialize the editor. -->
<script>
$(function() {
$('textarea').froalaEditor()
});
</script>
For more details on customizing the editor, please check the editor documentation.
npm install froala-editorbower install froala-wysiwyg-editor
At present, we officially aim to support the last two versions of the following browsers:
We use GitHub Issues as the official bug tracker for the Froala WYSIWYG HTML Editor. Here are some advices for our users that want to report an issue:
If you have questions or need help integrating the editor please contact us instead of opening an issue.
In order to use the Froala Editor you have to purchase one of the following licenses according to your needs. You can find more about that on our website on the pricing plan page.
FAQs
The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
The npm package froala-editor receives a total of 147,742 weekly downloads. As such, froala-editor popularity was classified as popular.
We found that froala-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.